<style scoped>

</style>
<template>
  <LinkList
      :list="link_list"
      :title="title"
      :link_href="link_href"
      :link_text="link_text"
      :cols="cols"
      :mode="mode"
  />
</template>

<script>
import {href_handle} from "@/vue_plugin/router_auto.js";
import {ajax} from "@/js/api_tool.js";
import LinkList from "@/components/card/LinkList.vue";

/**菜单列表
 * @prop {*}
 */
export default {
  _title_: '状态统计',
  _css_var_: {
    ...LinkList,
  },
  _head_img_: '',
  _group_: '详情组件',
  components: {LinkList},
  props:{
    count_api: {
      type: String,
      _label_: '统计接口',
      _tip_: '统计数据的接口（模型group_list类型接口）地址，列表需要的字段：count，status，pay_status(如果有)',
      _required_: true,
    },
    list: {
      type: [Array,Object],
      _label_: '状态列表',
      _tip_: '',
      _required_: true,
      _input_type_: [
        {_type_:'json_param_arr', config:[
            {name:'title', label:'标题', type:'text_one'},
            {name:'icon', label:'图标', type:'iconfont', width:'45px'},
            {name:'head_img', label:'头图', type:'file_img', width:'45px', tips:'图标的替代，优先级更高'},
            {name:'status', label:'状态', type:'text_one', tips:''},
            {name:'pay_status', label:'支付状态', type:'text_one', tips:''},
            {name:'show_count', label:'显示统计', type:'radio_switch', width:'60px', tips:''},
            {name:'href', label:'跳转链接', type:'text_one', tips:''},
          ]}
      ],
    },
    title: {
      type: String,
      _label_: '列表标题',
      _tip_: '显示在列表左上角的标题，如果和',
    },
    link_href: {
      type: String,
      _label_: '跳转链接',
      _tip_: '标题点击后的跳转地址，为空不会显示右侧箭头和链接文本',
    },
    link_text: {
      type: String,
      _label_: '链接文本',
      _tip_: '标题右侧的链接文本',
    },
    mode: {
      type: String,
      _label_: '列表模式',
      _tip_: 'round、round_list、round_row、round_img、其他。分别表示整体圆角、列表圆角、每一项圆角、图片圆角、无圆角',
    },
  },
  data(){
    return {
      countList: [],
    }
  },
  methods:{
    click(row){
      let href = row.href;
      if (href) href_handle(href);
    },
    badgeRow(row){
      if (parseInt(row.show_count) !== 1) return '';
      let res = 0;
      let limit_status = row.status ? row.status.split(',') : [];
      let limit_pay_status = row.pay_status ? row.pay_status.split(',') : [];

      this.countList.forEach((count_row)=>{
        let count = count_row.count || 0;
        if (!count) return ;
        let status = count_row.status+'';
        let pay_status = count_row.pay_status+'';
        if (limit_status.length && !~limit_status.indexOf(status)) return ;
        if (limit_pay_status.length && !~limit_pay_status.indexOf(pay_status)) return ;
        res += count;
      })
      return res || '';
    },
    async getCount(){
      if (!this.count_api) return;
      let res = await ajax({
        url: this.count_api,
        showMessage: ajax.SHOW_MESSAGE_NONE,
      })
      this.countList = res?.data?.list || [];
    }
  },
  watch: {
    count_api(){
      this.getCount();
    }
  },
  computed:{
    cols(){
      // 计算列数，5，4，3中取余最小的列数
      let len = Object.keys(this.list || []).length;
      let colsMap = [5,4,3];
      let dtMap = colsMap.map(v=>len % v);
      let minI = dtMap.indexOf(Math.min(...dtMap));
      return colsMap[minI];
    },
    link_list(){
      return Object.values(this.list || []).map(row=>{
        row.badge = this.badgeRow(row);
        return row;
      })
    },
    stringData(){
      return {
      }
    },
  },
  mounted(){
    this.getCount();
  }
}
</script>